<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<link rel="stylesheet" href="./xqy.css">
<link rel="stylesheet" href="./font/iconfont.css">
<body>
    <div class="head">
        <div class="common">
           <ul class="head-nav1">
               <li>
                 <a href="dl.html" class="h">亲，请登录</a>
                 <a href="zc.html">免费注册</a>
               </li>
               <li><a href="" style="padding:0 7px ;">手机逛淘宝</a></li>
              
               <li><a href="">网页无障碍</a></li>
           </ul>
           <ul class="head-nav2">
               <li><a href="list.html">淘宝网首页</a>
                 
               </li>
               <li><a href=""  style="padding: 0 6px;">我的淘宝<span class="iconfont">&#xe79a;</span></a>
                 <ol><li><a href="">已买到的宝贝</a></li>
                     <li><a href="">我的足迹</a></li>
                 </ol>
               </li>
               <li><a href="gwc.html"><i class="h"><span class="iconfont">&#xe70c;</span></i> 购物车</a></li>
               <li><a href=""><span class="iconfont">&#xe8c6;</span>收藏夹<span class="iconfont">&#xe79a;</span></a>
               <ol>
                 <li><a href="">收藏的宝贝</a></li>
                 <li><a href="">收藏的店铺</a></li>
               </ol></li>
               <li><a href="">商品分类</a></li>
               <li><a href="">免费开店</a></li>
               <li><a href="">千牛卖家中心<span class="iconfont">&#xe79a;</span></a>
                 <ol>
                   <li><a href="">开店入驻</a></li>
                   <li><a href="">已卖出的宝贝</a></li>
                   <li><a href="">出售中的宝贝</a></li>
                   <li><a href="">卖家服务市场</a></li>
                   <li><a href="">卖家培训中心</a></li>
                   <li><a href="">体检中心</a></li>
                   <li><a href="">电商学习中心</a></li>
                 </ol>
               </li>
               <li><a href="">联系客服<span class="iconfont">&#xe79a;</span></a>
               <ol>
                 <li><a href="">消费者客服</a></li>
                 <li><a href="">卖家客服</a></li>
               </ol>
               </li>
           </ul>
 
         
        </div>
    <img src="" alt="">
    <button class="addcart">加入购物车</button>
    <a href="gwc.html" class="js"><span class="iconfont">&#xe63f;</span> 去购物车结算</a>
    <div class="introduce"></div> 
    
    
    </body>
    <script src="./js/utils.js"></script>
    <script>
    // 获取当前商品的id - 从地址栏
    var reg = /id=(\d+)/
    var arr = location.search.match(reg)
    // console.log(arr);
    var id = arr[1]
    // 发送请求，获取商品的详细信息，展示在页面中
    sendAjax({
        url: 'http://localhost:8888/goods/item?id='+id,
        // 在当前页面需要展示的是不同的商品数据，我们如何知道我需要哪个商品的详细信息？前面在列表页点击的那个商品
        success: res => {
            console.log(res);
            document.querySelector('img').src = res.info.img_big_logo
            document.querySelector('.introduce').innerHTML = res.info.goods_introduce
    
            // 给添加购物车的按钮绑定事件
            addcart()
        }
    })
    
    // 给添加购物车的按钮绑定事件
    function addcart() {
        document.querySelector('.addcart').onclick = function() {
            // 判断用户是否登录
            // 从cookie中获取用户名
            var username = getCookie('username')
            if(username) {
                // 继续加入
                // 加入购物车的原理：
                /*
                在加入购物车以后，打开购物车页面，就能看到当前这个已经加入购物车的商品了，在a页面点击加入了，在b页面就看到了。
                加入购物车其实本质就是在存储数据，在购物车页面将存储的数据获取到显示即可
    
                1.数据存在数据库 - 借助接口 - 将ajax请求发送给接口，接口会在内部将数据存储在数据库的 - 在购物车页面发送ajax请求获取购物车数据
                2.如果没有接口，我们前端可以利用cookie或本地存储将数据存储起来，在购物车页面，获取数据显示
                */
               // 1.借助接口
               sendAjax({
                   url: 'http://localhost:8888/cart/add',
                   method: 'post',
                   data: {
                       goodsId: id,
                       id: getCookie('userId')
                   },
                   headers: {
                        authorization: localStorage.getItem('token')
                   },
                   success: res => {
                    //    console.log(res);
                    alert(res.message)
                   }
               })
            } else {
                alert('请先登录')
                // 没有登录 - 就强行让用户去登录页面登录
                // 获取当前地址拼接在登录页的地址后，表示当登录成功后要跳转回来
                // location.href = 'login.html?goto='+location.href
    
                // 为了能让登录后跳转回来，我们可以将当前地址存储在本地存储中，登录后，判断本地存储中是否有这个地址，有就回来，没有就去首页
                localStorage.setItem('url', location.href)
                location.href = 'dl.html'
            }
        }
    }
    
    </script>
    </html>